<template>
  <div>
      <el-form :inline="true" :model="downloaderSearch" class="demo-form-inline" label-position="right" label-width="150px" style="padding-top:20px;text-align:left;padding-left:50px;padding-right:50px;">
        <el-form-item label="时间" class="search-time">
            <div>
                <el-button-group>
                <el-button v-for="(item, index) in btnArr" :key="index" :type="item == selected?'success': ''"  @click="setTime(index, item)">{{item}}</el-button>
                <el-button @click="rangTime()" :type="selected == '自定义'?'success': ''">自定义</el-button>
            </el-button-group>

            <el-date-picker v-show="rangTimeShow"
                v-model="downloaderSearch.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
            </div>    
        </el-form-item>
        <div>
          <el-form-item label="合作站点">
            <el-select v-model="downloaderSearch.site_id" placeholder="请选择合作站点" filterable>
            <el-option v-for="item in sites" :key="item.id" :value="item.id" :label="item.name">{{item.name}}</el-option>   
            </el-select>
        </el-form-item>
        </div>
        <el-form-item style="padding-left:150px;">
            <el-button type="primary" @click="searchDownloader()">查询</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import {mapGetters, mapActions} from 'vuex'
// import {getCooperationSites} from '@/utils/getCommonOption'
import {sitesListUrl, getHeader} from '../../config/config'
import {getDateStr} from '../../utils'
export default {
  name: 'XzqSearch',
  // props: {
  //   searchUrl: {
  //     type: String
  //   },
  //   tableData: {
  //     type: Array
  //   }
  // },
  data() {
      return {
          btnArr: ['最近7天', '最近30天'],
          rangTimeShow: false,
          selected: '最近7天',
          sites: [],
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() >= Date.now();
            }
        },
      }
  },
  computed: {
    ...mapGetters([
      'downloaderSearch'
    ])
    
  },
  created(){
    //   console.log(getCooperationSites())
    axios.get(sitesListUrl, { headers: getHeader(), })
      .then(response => {
          if(response.status === 200 && response.data.success) {
              this.sites = response.data.data;
          }
        //   console.log(response)
      })
    
    // console.log(time);  
    if(Array.isArray(this.downloaderSearch.time)) {
          this.selected = '自定义'
          this.rangTimeShow = true;
      }else {
        let start_time = getDateStr(-6);
        let timeObj = {
          time: null,
          start_time: null,
          end_time: new Date(),
        }
        switch(this.downloaderSearch.time) {
          case 7:
            this.selected = '最近7天'
            timeObj['time'] = 7
            timeObj['start_time'] = start_time
            break;
          case 30:
            this.selected = '最近30天'
            timeObj['time'] = 30
            start_time = getDateStr(-29)
            timeObj['start_time'] = start_time
            break;
          default:
            this.selected = '最近7天'
            timeObj['time'] = 7
            timeObj['start_time'] = start_time
        }
        console.log(timeObj)
        this.setDownloaderSearchTime(timeObj)
      }  
  },
  methods: {
    ...mapActions([
      'setDownloaderSearchTime'
    ]),
    setTime(index, str) {
      this.selected = str;
      let start_time = getDateStr(-6);
      let timeObj = {
        time: null,
        start_time: null,
        end_time: new Date(),
      }
      switch(str) {
          case '最近7天':
             this.rangTimeShow = false
             timeObj['time'] = 7
             timeObj['start_time'] = start_time
             break;
          case '最近30天':
            this.rangTimeShow = false
            timeObj['time'] = 30
            start_time = getDateStr(-29)
            timeObj['start_time'] = start_time
            break;    
      }
      this.setDownloaderSearchTime(timeObj)
    },
    rangTime() {
        this.selected = '自定义';
        this.rangTimeShow = true;
        let obj = {
          time: this.downloaderSearch.time,
          start_time: this.downloaderSearch.time[0],
          end_time: this.downloaderSearch.time[1]
        }
        this.setDownloaderSearchTime(obj)        
    },
    searchDownloader() {
      let _this = this
      if(Array.isArray(this.downloaderSearch.time)) {
        let obj = {
          time: this.downloaderSearch.time,
          start_time: '',
          end_time: ''
        }
        obj.start_time = this.downloaderSearch.time[0]
        obj.end_time = this.downloaderSearch.time[1]
        this.setDownloaderSearchTime(obj)
      }
      _this.$emit('updateTable', 'updata')
    }
  }
}
</script>

<style>

</style>
